<template>
	<view class="charts">
		<f2 :init="initChart" :charts="chartCopyData" />
	</view>
</template>

<script>
	import f2 from '@/components/i-uni-f2/f2.vue'
	import DataSet from '@antv/data-set';
	export default {
		name: 'ChartTwoLineToo',
		props: {
			chartData: Object
		},
		data() {
			return {
			};
		},
		components: {
		    f2
		},
		computed: {
			chartCopyData() {
				const dv = new DataSet()
				  .createView()
				  .source(this.chartData.data)
				  .transform({
				    type: 'fold',
				    fields: this.chartData.y, // 展开字段集
				    key: 'key', // key字段
				    value: 'value', // value字段
				  });
				return dv.rows;
			}
		},
		created() {
		},
		methods: {
			initChart(F2, config) {
			    const chart = new F2.Chart(config)
			   const dv = new DataSet()
			     .createView()
			     .source(this.chartData.data)
			     .transform({
			       type: 'fold',
			       fields: this.chartData.y, // 展开字段集
			       key: 'key', // key字段
			       value: 'value', // value字段
			     });
			   chart.source(dv.rows);
			   chart.axis(this.chartData.x, {
			   	tickLine: {
			   		lineWidth: 1,
			   		stroke: '#555555',
			   		length: 5,
			   		alignTick: false
			   	},
			   	line: {
			   	    lineWidth: 1,
			   	    stroke: '#555555',
			   	    top: true, // 展示在最上层
			   	},
			   	label: {
			   		fill: '#555555'
			   	}  
			   });
			   chart.axis('value', {
			   	grid: null,
			   	label: {
			   		fill: '#555555'
			   	}  
			   });
			   chart.tooltip({
			   	showTitle: true,
			   	layout: 'vertical',
			   	background: {
			   	  radius: 4,
			   	  fill: '#fcfcfc',
			   	  padding: [ 6, 10 ],
			   	  shadowColor: 'rgba(0, 0, 0, 0.2)',
			   	  shadowBlur: 20
			   	},
			   	titleStyle: {
			   	  fontSize: 14,
			   	  fill: '#555555',
			   	  textAlign: 'start',
			   	  textBaseline: 'top'
			   	},
			   	nameStyle: {
			   	  fontSize: 14,
			   	  fill: '#555555',
			   	  textAlign: 'start',
			   	  textBaseline: 'middle'
			   	},
			   	valueStyle: {
			   	  fontSize: 14,
			   	  fill: '#555555',
			   	  textAlign: 'start',
			   	  textBaseline: 'middle'
			   	},
			   	onShow:(obj) => {
					obj.tooltip.offsetY = 20;
			   		obj.items[0].name = this.chartData.name[0];
			   		obj.items[1].name = this.chartData.name[1];
			   		obj.items[0].value += this.chartData.unit[0];
			   		obj.items[1].value += this.chartData.unit[1];
			   	}
			   });
			   chart.line().shape(this.chartData.shape).position(this.chartData.x + '*' + 'value').color('key', this.chartData.color);
			   chart.legend({
			     position: 'top', 
			     custom: true,
			     align: 'center',
			     wordSpace: 10,
			     itemGap: 20,
			     itemWidth: null,
			      items: [
			   	   {
			   		  name: this.chartData.name[0],
			   		  marker:(x, y, r, ctx) => {
			   			r = 4;
			   			ctx.lineWidth = 2;
			   			ctx.strokeStyle = this.chartData.color[0];
			   			ctx.moveTo(x - r - 8, y);
			   			ctx.lineTo(x - r - 2, y);
			   			ctx.stroke();
			   			ctx.moveTo(x + r, y);
			   			ctx.lineTo(x + r + 2, y);
			   			ctx.stroke();
			   			ctx.arc(x - 3, y, r, 0, Math.PI * 2, false);
			   			ctx.stroke();
			   		  }
			   		},{
			   		  name: this.chartData.name[1],
			   		  marker:(x, y, r, ctx) => {
			   			r = 4;
			   			ctx.lineWidth = 2;
			   			ctx.strokeStyle = this.chartData.color[1];
			   			ctx.moveTo(x - r - 8, y);
			   			ctx.lineTo(x - r - 2, y);
			   			ctx.stroke();
			   			ctx.moveTo(x + r, y);
			   			ctx.lineTo(x + r + 2, y);
			   			ctx.stroke();
			   			ctx.arc(x - 3, y, r, 0, Math.PI * 2, false);
			   			ctx.stroke();
			   		  }
			   		},
			   	]
			   });
			   chart.point().position(this.chartData.x + '*' + 'value').color('key', this.chartData.color).style('value', {
			   	  lineWidth: 2,
			   	  fill: '#FFF',
			   	  r: function r(val) {
			   	    return 3;
			   	  }
			   })
			   chart.scale(this.chartData.x,{
			   	tickCount: 5,
			   	isRounding: true
			   })
			   chart.render();
			    return chart
			}
		}
	}
</script>

<style scoped>
	#container-two-line {
		width: 100%;
		height: 100%;
	}
</style>
